<template>
  <div class="cardContainer">
    <div class="cardHead">
      <div class="cardHeadLeft">
        <div class="cardHeadTitle">
          {{ card.title }}
        </div>
        <div>
          <van-tag color="rgb(251,129,95)" plain>企宣资料</van-tag>
        </div>
      </div>

      <div @click="handleToInfomation(card.id)" class="cardHeadRight">
        <van-cell title="查看更多" is-link />
      </div>
    </div>

    <div class="cardMessage">
      {{ card.text }}
    </div>

    <div class="cardInfo">
      <div class="cardInfoLeft">
        <div class="cardInfoLeftImg">
          <van-image round width="20px" height="20px" :src="card.people.pic" />
        </div>
        <div>
          {{ card.people.id }}
        </div>
      </div>

      <div class="cardInfoRight">
        {{ card.people.time }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    card: {
      type: Object,
    },
  },
  methods: {
    handleToInfomation(id) {
      console.log(id);
      this.$router.push({
        name: "QiXuanZiLiaoInfomation",
        params: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.cardContainer{
  width 100%
  padding 5px 5px
  margin-bottom 10px
  background-color #fff
  border-radius 5px
  overflow hidden
  box-sizing border-box;
  .cardHead{
    padding 0 10px
    width 100%
    display flex
    justify-content space-between
    .cardHeadLeft{
      display flex
      width 45%
      .cardHeadTitle{
        margin-top 10%
        font-size 16px
        margin-right 5px
        font-weight 500
      }
      .van-tag{
        margin-top 26%
        font-size 10px
      }
    }
    .cardHeadRight{
      .van-cell__title{
        color rgb(171,171,171)
      }
    }
  }
  .cardMessage{
    padding 0 10px
    // margin 10px 0
    box-sizing border-box
    overflow hidden
    text-overflow ellipsis
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp: 2
		color #666666
		line-height 20px
		font-size :14px;
  }
  .cardInfo{
    padding 0 10px
    margin-top 10px
    display flex
    justify-content space-between
    .cardInfoLeft{
      display flex
      justify-content space-between
      font-size 12px
      height 20px
      line-height 20px
      color rgb(153,153,153)
      .cardInfoLeftImg{
        margin-right 5px
      }
    }
    .cardInfoRight{
      font-size 12px
      height 20px
      line-height 20px
      color rgb(153,153,153)
    }
  }
}
</style>
